<template>
  <e-dropdown trigger="custom" :visible="visible" transfer>
    <Icon type="filter" :class="{on: visible}" @click="toggleDropdown"> </Icon>
    <template #list>
      <e-dropdown-menu>
        <e-checkbox
          class="haloe-table-head-filter-checkbox"
          :indeterminate="indeterminateFilter"
          v-model="checkAllFilter"
          @click.prevent="handleCheckAllFilter"
        >
          全部
        </e-checkbox>
        <e-checkbox-group
          v-model="checkedFilters"  
          @on-change="toCheckAllFilters"          
        >
          <e-checkbox v-for="item in column.filters" :key='item.value' class="haloe-table-head-filter-checkbox" :label="item.value">{{item.label}}</e-checkbox>
        </e-checkbox-group>
        <div class="haloe-table-head-filter-footer">
          <e-button type="text" @click="handleResetFilter" :disabled="!checkedFilters.length">重置</e-button>
          <e-button type="primary" size="small" @click="handleFilter">确定</e-button>
        </div>
      </e-dropdown-menu>
    </template>
  </e-dropdown>
</template>

<script setup>
import Icon from '../icon/icon.vue';
import eDropdown from "../dropdown";
import eDropdownMenu from "../dropdown-menu";
import { ref, computed } from 'vue';

const props = defineProps({
  column: {
    type: Object,
  },
  objData:  {
    type: Object,
  },
})
const emit = defineEmits(['handleSelect'])

const visible = ref(false)
const checkedFilters = ref([])
const checkAllFilter = ref(false)
const indeterminateFilter = computed(() => {
  if(checkedFilters.value.length === props.column.filters.length) {
    return false
  } else {
    return !!checkedFilters.value.length
  }
})

const toggleDropdown = () => {
  visible.value = !visible.value
}

const handleResetFilter = (event) => {
  event.stopPropagation();
  checkedFilters.value = []
  checkAllFilter.value = false
  // emit('handleSelect', checkedFilters.value)
  // visible.value = false
}

const handleFilter = () => {
  emit('handleSelect', checkedFilters.value)
  visible.value = false
}

const handleCheckAllFilter = () => {
  if(indeterminateFilter.value) {
    checkAllFilter.value = false
  }else{
    checkAllFilter.value = !checkAllFilter.value
  }

  if (checkAllFilter.value) {
    checkedFilters.value = [...props.column.filters.map(item=> item.value)]
  } else {
    checkedFilters.value = []
  }
}

const toCheckAllFilters = (data) => {
  if (data.length === props.column.filters.length) {
    checkAllFilter.value = true
  } else {
    checkAllFilter.value = false
  }
}
</script>